<template>
	<view style="height: 100vh;background: #F6F6F6;padding-bottom: 200rpx;">
		<view class="header" :style="{'height':statusBarHeight+'px'}">
			<view class="navon" :style="{'height':statusBarHeight+'px','padding-top':statusBarHeight1+'px'}">
				<view class="header-back" @click="goBack()">
					<i class="iconfont" style="font-size: 20px;">&#xe605</i>
				</view>
				<view class="hearder-content">
					查看评价
				</view>
			</view>
		</view>


		<view class="">
			<view class="content-bg" :style="{'top':statusBarHeight+'px'}">
				<view class="tabs" v-if="showTabs">
					<u-tabs style="width: 100%;" @click="clickService" :list="tabList1" lineWidth="30"
						lineColor="#f56c6c" keyName="name" :activeStyle="{
					    color: '#303133',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					    color: '#606266',
					    transform: 'scale(1)'
					}" itemStyle="padding:0 40rpx; height: 34px;width:300rpx">
					</u-tabs>
				</view>
				<!-- 发出的评价 -->
				<view class="content" v-if="showSendEvaluate">
					<view class="list">
						<view class="title">
							标签
						</view>
						<view class="tabs">
							<view class="tabs-1">
								<view v-for="(item, index) in tagsList" :key="index" class="tabs-2"
									:class="{ 'active': isSelected22.includes(item.id) }" @click="selectTab2(item.id)">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
				</view>



				<!-- 收到的评价 -->
					<view class="" v-if="showReceiveEvaluate">
						<view class="content">
							<view class="list">
								<view class="title">
									<view>
										评分
									</view>
									<view class="title-1">
										综合评分：{{pingList[isSelected]?pingList[isSelected].fen:0}}
									</view>
								</view>
								<view class="tabs">
									<view class="tabs-1">
										<view v-for="(item, index) in pingList" :key="index" class="tabs-2"
											:class="{ 'active': isSelected == index }" @click="selectTab(index)">
											{{ item.title }}
										</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="title">
									星级
								</view>
								<view class="con1">
									<view class="text" v-for="(item,index) in starList">
										{{item.xing_name}}：
										<u-rate :value="starInfo[index]?starInfo[index].xing:1" active-color="#FF7681" inactive-color="#D9D9D9" gutter="10"></u-rate>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="title">
									印象
								</view>
								<view class="tabs">
									<view class="tabs-1">
										<view v-for="(item, index) in tagsList" :key="index" class="tabs-2"
											:class="{ 'active': isSelected2.includes(item.id) }" @click="selectTab2(item.id)">
											{{ item.name }}
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="list">
								<view class="title" @click="goPage('report')">
									举报
									<u-icon name="arrow-right" size="14" color="#333333"></u-icon>
								</view>
							</view> -->
						</view>
					</view>



			</view>
		</view>

	</view>
</template>

<script>
	import index from '../../uni_modules/uview-ui';

	export default {

		data() {
			return {
				showTabs:true,
				faceScore: 0,
				serviceScore: 0,
				techScore: 0,
				showSendEvaluate: true,
				showReceiveEvaluate: false,
				statusBarHeight: 0,
				statusBarHeight1: 0,
				titleBarHeight:0,
				tabList: [{
						id: 1,
						name: '有耐心',
					},
					{
						id: 2,
						name: '机智',
					},
					{
						id: 3,
						name: '勇敢',
					},
				],
				tabList1: [{
						id: 1,
						status: 1,
						name: '发出的评价'
					},
					{
						id: 2,
						status: 2,
						name: '收到的评价'
					}
				],
				tabList2: [{
					name: '非常好'
				}, {
					name: '不错'
				}, {
					name: '一般'
				}, {
					name: '不行'
				}, {
					name: '很差'
				}],
				selectedIndex: -1,
				evaluateList: [{
					id: 1,
					totalScore: '100',

				}],
				more: [{
						id: 1,
						face: 4,
					},
					{
						id: 2,
						service: 4,
					},
					{
						id: 1,
						technology: 4,
					},
					
				],
				
				isSelected: 0,
				isSelected2: [],
				isSelected22: [],
				starList:[],
				starInfo:[],
				pingList:[],
				tagsList:[],
				id:0,
				type:0,
			}
		},
		onLoad(option) {
			this.id=option.id
			
			if(option.type){
				this.showTabs=false
				if(option.type==1){
					this.showReceiveEvaluate=false
					this.showSendEvaluate=true
				}else{
					this.showReceiveEvaluate=true
					this.showSendEvaluate=false
				}
			}
			uni.getSystemInfo({
				success: (res) => {
					// #ifdef MP-WEIXIN
						this.statusBarHeight1 = uni.getMenuButtonBoundingClientRect().top;
						this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
						this.statusBarHeight = this.titleBarHeight + this.statusBarHeight1;
					// #endif	
					// #ifndef MP-WEIXIN
						this.statusBarHeight = res.statusBarHeight * 1 + 46;
						this.statusBarHeight1 = res.statusBarHeight;
					// #endif
				},
			});	
			this.getData();
		},
		methods: {
			async getData(){
				await this.getTages()
				await this.getStar()
				await this.getPing()
				this.getDetail()
			},
			getTages(){
				this.rq.getData('daren/tags').then(res => {
					this.tagsList=res.data
				})
			},
			getDetail(){
				this.rq.getData('daren/evaluate_detail',{order_id:this.id,type:2}).then(res => {
					
					if(res.data){
						this.isSelected2=res.data.tag_ids.map(function(res){return res*1;})
						console.log(this.isSelected2,"this.isSelected2")
						this.starInfo=res.data.xing_ji
						console.log(this.starInfo,"this.starInfo")
						for(var i in this.pingList){
							if(this.pingList[i].id == res.data.ping_tag_id){
								this.isSelected=i
								break;
							}
						}
					}
					
				})
				this.rq.getData('daren/evaluate_detail',{order_id:this.id,type:1}).then(res => {
					if(res.data){
						this.isSelected22=res.data.tag_ids.map(function(res){return res*1;})
					}
				})
				
			},
			getStar(){
				this.rq.getData('daren/xing').then(res => {
					
					this.starList=res.data
				
				})
			},
			getPing(){
				this.rq.getData('daren/ping').then(res => {
					this.pingList=res.data
				})
			},
			goBack() {
				console.log(111);
				uni.navigateBack()
			},
			selectTab(index) {
				console.log(111);
				this.selectedIndex = index;
			},
			clickService(event) {
				const name = event.name;
				if (name === '发出的评价') {
					this.showSendEvaluate = true;
					this.showReceiveEvaluate = false;
				} else if (name === '收到的评价') {

					this.showSendEvaluate = false;
					this.showReceiveEvaluate = true;
					const faceObj = this.more.find(item => item.hasOwnProperty('face'));
					if (faceObj && faceObj.face) {
						this.$set(this, 'faceScore', parseInt(faceObj.face));
					}
					const serviceObj = this.more.find(item => item.hasOwnProperty('service'));
					if (serviceObj && serviceObj.service) {
						this.$set(this, 'serviceScore', parseInt(serviceObj.service));
					}
					const technologyObj = this.more.find(item => item.hasOwnProperty('technology'));
					if (technologyObj && technologyObj.technology) {
						this.$set(this, 'techScore', parseInt(technologyObj.technology));
					}
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	

	.content-bg {

		position: relative;
	}

	.content-tab {
		width: 660rpx;
		height: 272rpx;
		margin: 40rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.header {
		width: 100%;
		height: auto;
		display: table;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
		background-color: #fff;

		.header-back {
			margin-left: 10rpx;
			height: 13px;
			line-height: 13px;
			position: absolute;
			left: 0;
			color: #000;
		}

		.hearder-content {
			font-size: 16px;
			font-weight: normal;
			line-height: 28px;
			text-align: center;
			display: flex;
			align-items: center;
			letter-spacing: 0px;
			color: #000;
		}

		.navon {
			width: 100%;
			height: auto;
			position: absolute;
			top: 0px;
			left: 0px;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}
	
	.content {
		margin-top: 20rpx;
		width: 100%;
	
		.list {
			width: 84%;
			margin: 20rpx auto;
			padding: 30rpx;
			border-radius: 8px;
			opacity: 1;
			background: #FFFFFF;
	
			.title {
				font-family: PingFang SC;
				font-size: 16px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.title-1 {
					font-family: PingFang SC;
					font-size: 14px;
					font-weight: normal;
					line-height: 15px;
					letter-spacing: 0px;
					color: #FF7681;
				}
			}
	
			.con1 {
				margin: 40rpx 0 20rpx;
	
				.text {
					font-family: PingFang SC;
					font-size: 14px;
					font-weight: normal;
					line-height: 14px;
					letter-spacing: 0px;
					color: #666666;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
				}
			}
	
			.tabs {
				background-color: #ffffff;
				margin: 40rpx 0 20rpx;
	
				.tabs-1 {
					display: flex;
					height: 50rpx;
					margin: 20rpx 0;
				}
	
				.tabs-2 {
					width: 120rpx;
					justify-content: center;
					align-items: center;
					display: flex;
					margin-right: 30rpx;
					font-family: PingFang SC;
					font-size: 12px;
					font-weight: normal;
					line-height: 15px;
					text-align: center;
					letter-spacing: 0px;
					color: #FF7681;
					background: #FFEEEF;
					box-sizing: border-box;
					border: 1px solid #FF7681;
					border-radius: 22px;
				}
	
				.tabs-2.active {
					position: relative;
					line-height: 15px;
					transition: all 0.3s ease;
					border-radius: 22px;
					opacity: 1;
					background: #FF7883;
					border: 1px solid #FF7681;
					font-family: PingFang SC;
					font-size: 12px;
					font-weight: normal;
					letter-spacing: 0px;
					font-variation-settings: "opsz" auto;
					color: #FFFFFF;
					// padding: 0 10rpx;
				}
			}
		}
	}
	
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;
	
		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
		}
	}
</style>